<template>
  <div class="pre-order">
    <h1>确认订单</h1>
    <!-- 表格 -->
    <qf-table
      :tableData="tableData"
      :columns="columns"
      :border="false"
      :tableLoading="tableLoading"
    >
	<!-- 产品名称 -->
      <template v-slot:productName="{ row }">
        <img :src="row.imageUrl" height="20" style="vertical-align: middle;" alt="" />&nbsp;
        <b style="color: red;">{{ row.productName }}</b>
		<br>
        <b>{{ row.description }}</b>
      </template>
	  <!-- 产品数量 -->
	  <template v-slot:quantity="{row}">
		 <el-input-number 
		 v-model="quantity" 
		 @change="handleCountChange(row.price)"  
		 :min="1" :max="row.inventory+1" 
		 label="描述文字">
		</el-input-number>
	  </template>
	  <!-- 总价格 -->
	  <template v-slot:total>
			<b style="color:red;font-size:20px">{{tableTotal}}元</b>
	  </template>
    </qf-table>
    <!-- 确认订单的按钮 -->
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span
            class="realpay--title"
            data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
            >实付款：</span
          >
          <span class="realpay--price-symbol">¥</span>
          <span class="realpay--price" style="color: rgb(255, 80, 0)">{{tableTotal}}</span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span>
              <span class="confirmAddr-pro"
                >{{desc}}</span
              >
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span>
              <span class="confirmAddr-usn">{{userInfo.nickname}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue";
import * as api from "@/api/product";
import * as payApi from '@/api/pay'
import { useRoute,useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import {useUser} from '@/store/users'
import {storeToRefs} from 'pinia'
import { ElMessage } from "element-plus";
//pinia 用户信息 
let userStore = useUser()
//最大的的路由对象
let router = useRouter()
let {userInfo} = storeToRefs(userStore)
//当前路由对象
let route = useRoute();
//业务
//1.获取上一个页面传递过来的query参数，获取当前的产品信息
let { product_id } = route.query;
console.log(product_id);
//2.展示产品信息
//根据产品的id获取商品的详情，发送请求
let desc = ref('')
let getProduct = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getProductApi(product_id);
    console.log(111,res);
    tableData.value = res.data.data;
    tableLoading.value = false;
	//产品的详情，进行赋值，表格下面的结构使用
	desc.value = res.data.data[0].description
	//第一次拿到了商品，所以对total进行初次赋值操作，可以将数据中的price作为total的首次参数
	tableTotal.value = res.data.data[0].price
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};
onMounted(() => {
  getProduct();
});
//声明一个表格加载动画 
let tableLoading = ref(false);
//声明一个表格数据
let tableData = ref([]);

//声明一个列对象，用于展示表格数据
let columns = ref([
  {
    label: "产品名称",
    prop: "productName",
  },
  {
    label: "单价",
    prop: "price",
  },
  {
    label: "数量",
    prop: "quantity",
  },
  {
    label: "总价格",
    prop: "total",
  },
]);
//声明一个计数器的数量和数量变化的方法
let quantity = ref(1)
//计算总价格(只给用户看到，并不能解决最终付款价格)
// let tltal = computed(()=>{
// 	return 
// })
let tableTotal = ref('0.00')
let handleCountChange = (price)=>{
   tableTotal.value =( quantity.value * price).toFixed(2)
}


//3.进行下单

//支付核心流程或者关键字
//下单：传递商品id和商品数量

let commitOrder = async ()=>{
	//1.调用下单接口，传递id和产品的数量
	try{
		let res = await payApi.preOrderApi(product_id,quantity.value)
		console.log(res)
		//2.跳转页面，跳转到支付页面，pay/payment
		router.push({path:'/pay/payment',query:{order_id:res.data.order_id}})
		ElMessage({
			type:'success',
			message:res.data.msg
		})
	}catch(e){
		console.log(e)
	}
	
	//3.payment 页面需要拉取订单详情，并且发起支付
}
//支付：传递订单id
</script>

<script>
export default {
  meta: {
    name: "确认订单",
  },
};
</script>

<style lang="less" scoped>
.price {
  color: #ff0036;
  font-weight: bolder;
}
.total_fee {
  font-size: 16px;
  color: #ff0036;
}
.el-button {
  width: 180px;
  border-radius: 0;
}
.confirm-title {
  text-align: left;
  margin-bottom: 30px;
}
.pre-order {
  padding: 80px 100px 0 100px;
}
.total-fee {
  margin-top: 50px;
  text-align: right;
}
.box-wrap {
  display: inline-block;
  border: 1px solid #ff0036;
  .box-shadow {
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;
    .realpay--title {
      font-weight: 700;
      color: #333;
    }
    .realpay--price-symbol {
      font-size: 26px;
      margin-right: 4px;
      color: #999;
    }
    .realpay--price {
      color: #ff0036;
      font: 700 26px tahoma;
    }
    .order-confirmAddr {
      line-height: 1.6;
      font-weight: bolder;
      margin-top: 10px;
      font-size: 16px;
      // text-align: center;
      // font-family: "PingFang SC";
      .confirmAddr-usn {
        color: #ff0036;
        font-size: 20px;
      }
      .confirmAddr-pro {
        color: goldenrod;
        font-size: 16px;
      }
    }
  }
}
</style>
